<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        action="数据提交的地址" (跳转)
        method = "get/post"  提交的方式

        以get方式传递数据时,会将参数数据队列(user=a123123&pwd=123123)拼接到url之后 用 "?"分隔
     -->

    <button class="get">获取</button>
    <button class="set">设置</button>
    <br>
    <br>
    <br>
    <form action="" method="get">
        <div class="input-group">
            <label for="">用户名:</label>
            <input type="text" name="user">
        </div>
        <div class="input-group">
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
        </div>
        <div class="input-group">
            <input type="submit" value="提交">
        </div>
    </form>
    <a href="#one">one</a>
    <a href="#two">two</a>
</body>
<script>
    // location -> 地址栏相关的信息 => window.location

    // 属性
    // protocol   获取和设置url的协议部分
    // hostname   获取和设置url的域名部分
    // port       获取和设置url的端口部分
    // host       获取和设置url的域名+端口部分
    // origin     获取和设置url的 协议 + 域名+端口 部分

    // pathname   获取和设置url的文件路径部分

    // search     获取和设置url的参数数据部分
    // hash       获取和设置url的hash值部分
    // href       获取和设置url

    // 方法
    // reload()   重新加载

    // http://127.0.0.1:5500/day13/html/08%20location.html

    console.log(location);

    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];

    getBtn.onclick = function () {
        console.log(location.protocol);
        console.log(location.hostname);
        console.log(location.port);
        console.log(location.host);
        console.log(location.origin);
        console.log(location.pathname);
        console.log(location.search);
        console.log(location.hash);
        console.log(location.href);
    }

    setBtn.onclick = function () {
        // location.protocol = "https:"
        // location.hostname = "baidu";
        // location.port = 5555;
        // location.host
        // location.origin
        // location.pathname
        // location.search
        // location.hash
        // location.href

        // location.search = "?aaa=1111&bbb=2222"
        // location.hash = "#two";


        // window.open()  打开新的窗口  跳转指定页面

        // 当前窗口跳转
        // location.href = "https://www.baidu.com";
        // location.href = "./03 日历标红.html";


        location.reload();

    }

</script>

</html>